<template>
  <view>
    <!-- ------------------------ 自定义导航栏-开始 ------------------------ -->
    <u-navbar bgColor="rgba(0, 0, 0, 0);" @leftClick="backHome" leftIconColor="#fff" title="ZEEKR新车"
      :titleStyle="{ color: '#fff' }"></u-navbar>
    <view class="swiper-wrap">
      <!-- 车型 -->
      <view class="car-list">
        <view class="car-list-name" @click="clickCarName(i)" :class="{ 'current-swiper': i === currentCart }"
          v-for="(item, i ) in selectCarModelList" :key="item.id">
          {{ item.ve_name }}
        </view>
      </view>
      <!-- ------------------------ 车列表轮播图海报图-开始 ------------------------ -->
      <swiper @change="swiperChange" :current="currentCart" class="swiper" :indicator-dots="false" :interval="2000"
        :duration="500">
        <swiper-item v-for="item in selectCarModelList" :key="item.id">
          <view class="swiper-item">
            <view class="swiper-item__text">

              <view class="img-box">
                <image class="img" mode="aspectFit" v-if="item.ve_name === '009'"
                  src="https://www.kamlung.net/images/zeekr/car/ZEEKR_009_t_w.png"></image>
                <image class="img" mode="aspectFit" v-if="item.ve_name === 'X'"
                  src="https://www.kamlung.net/images/zeekr/car/ZEEKR_X_t_w.png"></image>
                <view class="swiper-item_name-sub" v-if="item.ve_name === 'X'">新奢全能SUV</view>
                <view class="swiper-item_name-sub" v-if="item.ve_name === '009'">全球首款原生纯电豪华MPV</view>
              </view>
              <!-- <view class="swiper-item_name">{{ item.vem_name }}</view>
              <view class="swiper-item_name-sub" v-if="item.ve_name === '007'">纯电豪华轿车</view>
              <view class="swiper-item_name-sub" v-if="item.ve_name === 'X'">新奢全能SUV</view>
              <view class="swiper-item_name-sub" v-if="item.ve_name === '009'">全球首款原生纯电豪华MPV</view> -->
            </view>
            <!-- <image class="img" mode="aspectFill" :src="item.img_ba"></image> -->
            <video object-fit='cover' autoplay loop muted :controls="false" class="video" :enable-progress-gesture="false"
              :src="item.video_url"></video>
          </view>
          <view class="nav-box">
            <view class="subscribe more" @click="goDetailPage(item)">了解更多</view>
            <view class="subscribe test" @click="goSubscribe(item)">预约试驾</view>
          </view>
        </swiper-item>
      </swiper>
      <!-- 参数 -->
      <view class="param-list">
        <view class="param-list-name" v-for="item in carsDetailPara" :key="item.propt_id">
          <view class="param-list-value">{{ item.prop_valCtt }}</view>
          <view class="param-list-param"> {{ item.prop_name }}</view>
        </view>
      </view>
    </view>
    <!-- ------------------------ 公司列表-开始 ------------------------ -->
    <view class="com-list-swiper">
      <view class="swiper-title">
        <view class="swiper-title-l">预约试驾</view>
        <view class="swiper-title-r" @click="goCompanyList">更多门店 <uni-icons type="forward" size="14"></uni-icons></view>
      </view>
      <swiper class="swiper" :interval="2000" :duration="500">
        <swiper-item class="swiper-item" v-for="item in companyList" :key="item.id">
          <view class="img-box" @click="goCompanyDetail(item.company_id)">
            <image class="img" mode="aspectFill" :src="item.comImg"></image>
          </view>
          <view class="swiper-item-name">{{ item.markers_title }}</view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 视频 -->
    <view class="video_box" v-if="currentImgBa">
      <!-- <video object-fit='cover' autoplay :muted="true" :controls="false" :enable-progress-gesture="false" class="videoCss" :src="currentVideo"></video> -->
      <image class="img" mode="aspectFill" :src="currentImgBa"></image>
    </view>
    <!-- {{ currentImgBa }} -->
    <!-- ------------------------ 预约试驾按钮-开始 ------------------------ -->
    <view v-if="showBtn" class="goSubscribe" @click="goSubscribe(selectCarModelList[currentCart])">预约试驾</view>
  </view>
</template>

<script>
let brand = 'ZEEKR'
let brand_id = 52
import { companyListApi } from '@/API/reqData'
import { carModelListApi, brandCarsDetails, brandCarsParamDetails } from '@/API/carSeries'
export default {
  name: "CarTypeList",
  data() {
    return {
      // 基础路径
      baseUrl: `${this.$baseUrl}/images/${brand}/car/`,
      baseUrl2: this.$baseUrl,
      // 车型，车系列表
      currentCart: -1,
      carModelList: [],
      carsDetails: new Map(),
      carsDetailsIndex: new Map(),
      carsDetailsAllPara: {},
      // 公司列表
      getCompanyListParma: {
        state: 1,
        brand_id,
        region_id: '',
        page: 1,
        pageSize: 20,
        company_type: 1,
      },
      companyList: [],
      showBtn: false
    }
  },
  onLoad() {
    // 混合分享信息
    this.shareMixin.title = `车型列表`
    this.shareMixin.path = `/CarModel/CarTypeList`
    this.getCarModelList()
    // 品牌服务公司
    this.companyListFn()
  },
  methods: {
    // ------------------------ 汽车列表-开始 ------------------------
    async getCarModelList() {
      const {
        data: { data }
      } = await carModelListApi({
        brand_id,
        state: 1
      })
      // 过滤掉空的
      this.carModelList = data.filter(item => {
        if (item.ve_groups.length) {
          return true
        }
      })
      let { ve_id, vem_id, vem_vid } = data[0].ve_groups[0]
      // 集团品牌车型(详情)
      this.getBrandCarsDetails(ve_id, vem_id, vem_vid, brand_id)
      // console.log('carModelList :>> ', this.carModelList);
    },
    // 集团品牌车型(详情)
    async getBrandCarsDetails(ve_id, vem_id, vem_vid, brand_id, index = 0) {
      const {
        data: { data, code }
      } = await brandCarsDetails({ ve_id, vem_id, vem_vid, brand_id })
      console.log('data-Details :>> ', data);
      if (code == 200) {
        this.currentCart = index
        let { ve_style = [] } = data
        this.carsDetails.set(index, data)

        if (ve_style.length) {
          // 集团品牌车型(参数详情)
          this.brandCarsParamDetailsFn(ve_style[0], index)
        }
      }
    },
    // 集团品牌车型(参数详情)
    async brandCarsParamDetailsFn({ ve_id, vem_id }, index) {
      const {
        data: { data }
      } = await brandCarsParamDetails({ ve_id, vem_id, state: 1 })
      // 动力传动系统
      let param = data.prop_parameterValALL[0].prop_parameterVal.filter(item => item.propt_parent_id === 14600)
      console.log('data.param :>> ', param);
      this.$set(this.carsDetailsAllPara, index, param)

    },
    // 公司列表
    async companyListFn() {
      const {
        data: { data }
      } = await companyListApi(this.getCompanyListParma)
      let base = `${this.baseUrl2}/images/company/4s/`
      let companyList = []
      for (let j = 0; j < data.length; j++) {
        let { company_name, company_id, company_list } = data[j]
        for (let i = 0; i < company_list.length; i++) {
          let { company_images, markers_title } = company_list[i]
          companyList.push({ id: `${j + 1}-${i + 1}`, company_name, company_id, comImg: `${base}${company_images}`, markers_title })
        }
      }
      this.companyList = companyList
      // console.log('data :>> ', data);
    },
    // 转到详情页
    goDetailPage({ vem_vid, vem_id, ve_id }) {
      uni.navigateTo({
        url: `/CarModel/CarDetail?vemVid=${vem_vid}&vemId=${vem_id}&ve_id=${ve_id}`
      })
    },
    // 去预约试驾
    goSubscribe(item) {
      console.log('item :>> ', item);
      let { img_ba, ve_name } = item
      uni.navigateTo({ url: `/pages/TestDrive/TestDrive?img_src=${img_ba}&ve_name=${ve_name}` })
    },
    // ------------------------ 切换轮播-开始 ------------------------
    swiperChange(e) {
      let index = e.target.current
      if (this.carsDetails.has(index)) {
        this.currentCart = index
      } else {
        let { ve_id, vem_id, vem_vid, brand_id } = this.selectCarModelList[index]
        // 集团品牌车型(详情)
        this.getBrandCarsDetails(ve_id, vem_id, vem_vid, brand_id, index)
      }
    },
    // ------------------------ 点击车型-开始 ------------------------
    clickCarName(index) {
      this.currentCart = index
    },
    // 返回主页
    backHome() {
      uni.switchTab({ url: `/pages/index` })
    },
    // 到公司详情页
    goCompanyDetail(company_id) {
      uni.navigateTo({
        url: `/pages/StorePage/StoreDetails?compaId=${company_id}`,
      })
    },
    // 到公司列表页
    goCompanyList() {
      uni.navigateTo({ url: `/pages/StorePage/StoreSee`, })
    },
  },
  computed: {
    selectCarModelList() {
      let list = []
      let baseUrl = this.baseUrl
      let carList = this.carModelList
      for (let j = 0; j < carList.length; j++) {
        let cars = carList[j].ve_groups
        for (let i = 0; i < cars.length; i++) {
          let { brand_id, ve_id } = carList[j]
          let { vem_id, vem_vid, ve_name, vem_coverImg, cover_piiic_img, vem_name, video_url } = cars[i]
          list.push({ id: j + '-' + i, video_url: `${baseUrl}${video_url}`, vem_name, brand_id, ve_id, vem_id, vem_vid, ve_name, img_src: `${baseUrl}${vem_coverImg}`, img_ba: `${baseUrl}${cover_piiic_img}` })
        }
      }
      return list
    },
    // currentCarInfo() {
    //   return this.carsDetails.get(this.currentCart)
    // },
    carsDetailPara() {
      return this.carsDetailsAllPara?.[this.currentCart] || []
    },
    // currentVideo() {
    // let temp = this.currentCarInfo
    // if (!temp?.info?.video_url) return ''
    // return `${this.baseUrl}${temp?.info?.video_url}`
    // },
    currentImgBa() {
      // let temp = this.currentCarInfo
      // if (!temp?.info?.video_url) return ''
      // return `${this.baseUrl}${temp?.info?.video_url}`
      return this.selectCarModelList?.[this.currentCart]?.img_ba

    }
  },
  onPageScroll(e) {
    if (e.scrollTop > 700) {
      this.showBtn = true
    } else {
      this.showBtn = false
    }
  }
}
</script>


<style lang="scss" scoped>
.swiper-wrap {
  width: 100%;
  position: relative;

  .car-list {
    position: absolute;
    z-index: 1000;
    left: 50%;
    top: 180rpx;
    color: #fafafa;
    width: 90%;
    transform: translateX(-50%);
    display: flex;

    &-name {
      font-size: 32rpx;
      width: 180rpx;
      text-align: center;
      line-height: 60rpx;
      font-weight: 400;
    }

    &-name:nth-child(n+2) {
      margin-left: 10rpx;
    }

    .current-swiper {
      font-weight: 600;
      font-size: 40rpx;
    }
  }

  .swiper {
    height: 100vh;

    .swiper-item {
      position: relative;
      display: block;
      height: 100%;

      &__text {
        width: 100%;
        position: absolute;
        left: 0rpx;
        top: 340rpx;
        // transform: translate(50%, 0);
        color: #fafafa;
        z-index: 120;

        .img-box {
          width: 60%;
          margin: 0 auto;

          .img {
            width: 100%;
            height: 100%;
            height: 60rpx;
          }
        }


      }

      &_name {
        font-size: 44rpx;
        font-weight: 600;
      }

      &_name-sub {
        font-size: 36rpx;
        text-align: center;
        line-height: 80rpx;
        // font-weight: 600;
        // font-family: 'LynkcoType-Medium';
      }

      // .img {
      //   width: 100%;
      //   height: 100%;
      // }
      .video {
        width: 100%;
        height: 100%;
      }
    }
  }

  // ------------------参数-----------------
  .param-list {
    position: absolute;
    z-index: 1000;
    left: 50%;
    bottom: 154rpx;
    color: #fafafa;
    width: 100%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-around;

    &-name {
      flex: 1;
      font-size: 22rpx;
      // width: 180rpx;
      text-align: center;
      line-height: 50rpx;
    }

    &-value {
      font-size: 42rpx;

      line-height: 70rpx;
      font-weight: 600;
    }

    .current-swiper {
      font-size: 34rpx;
    }
  }
}

// ------------------视频-----------------
.video_box {
  margin-top: 5rpx;
  height: 100vh;

  // .videoCss {
  //   width: 100%;
  //   height: 100%;
  // }

  .img {
    width: 100%;
    height: 100%;
  }
}

// ------------------------ 公司列表-开始 ------------------------
.com-list-swiper {
  margin: 30rpx 40rpx 30rpx 40rpx;
  height: 70vw;
  // border: #f00 solid 1px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .swiper {
    height: 100%;
    // border: #000 solid 1px;
    flex: 1;
  }

  .swiper-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 70rpx;

    &-l {
      font-weight: 600;
      font-size: 26rpx;
      color: #000;
    }

    &-r {
      font-size: 22rpx;
      color: #666;
    }
  }


  .swiper-item {
    height: 100%;

    .img-box {
      height: 50vw;
      overflow: hidden;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    &-name {
      text-align: center;
      font-size: 26rpx;
      line-height: 80rpx;
      // font-family: 'LynkcoType-Medium';
      font-weight: 600;
    }
  }
}

// ------------------预约试驾-----------------
.nav-box {
  width: 100%;
  justify-content: space-around;
  align-items: center;
  display: flex;
  position: absolute;
  // position: fixed;
  // bottom: 80rpx;
  bottom: 46rpx;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10000;

  .subscribe {
    width: 40%;
    text-align: center;
    font-weight: 600;
    line-height: 80rpx;
    // background-color: #000;
    color: #fafafa;
    font-size: 28rpx;
  }

  .more {
    // background-color: #000;
    border: #fafafa solid 1px;
    // color: #fafafa;
  }

  .test {
    background-color: #fafafa;
    color: #000;
  }
}

// ------------------------ 预约试驾按钮-开始 ------------------------
.goSubscribe {
  position: fixed;
  bottom: 80rpx;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90%;
  text-align: center;
  font-weight: 600;
  line-height: 90rpx;
  background-color: #000;
  color: #fafafa;
  font-size: 32rpx;
  z-index: 5;
}
</style>
